<template>
  <div v-loading="loading">
    <!--查询条件start --111s-->
    <el-card class="box-card acc-card">
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <el-form-item>
          <el-date-picker
            v-model="createTime"
            unlink-panels
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="left"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="dateChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-input
            v-model="query.usernick"
            placeholder="请输入用户昵称"
            prefix-icon="el-icon-search"
            @change="onSubmit"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onRest"
          ></el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
        <!--            <el-form-item style="right: 10px;position: absolute;">-->
        <!--                <el-button type="primary" icon="el-icon-edit" @click.native="showmseeage()">站内信-->
        <!--                </el-button>-->
        <!--            </el-form-item>-->
      </el-form>
      <!--查询条件end-->

      <!--列表start --222s-->
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="list"
        :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column label="序号" type="index" width="80" align="center">
          <template scope="scope">
            <span>{{
              (query.currentPage - 1) * query.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" prop="userpic" align="center" width="100">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.userpic"
              placement="right"
              trigger="hover"
            >
              <img
                :src="scope.row.userpic"
                style="width: 400px; border-radius: 3px"
              />
              <img
                slot="reference"
                :src="scope.row.userpic"
                style="max-height: 80px; max-width: 50px; border-radius: 5px"
              />
            </el-popover>
            <el-popover v-else placement="right" trigger="hover">
              <img
                src="../../assets/image/appimage.png"
                style="width: 400px; border-radius: 3px"
              />
              <img
                slot="reference"
                src="../../assets/image/appimage.png"
                style="max-height: 80px; max-width: 50px; border-radius: 5px"
              />
            </el-popover>

            <!-- <span v-else>-</span> -->
          </template>
        </el-table-column>
        <el-table-column
          label="用户昵称"
          prop="usernick"
          width="130"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.usernick != null">
              {{ scope.row.usernick }}</span
            >

            <span v-else>{{ scope.row.usermobile }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="手机号码"
          prop="usermobile"
          align="center"
          width="150"
        />
        <el-table-column
          label="开发关系类型"
          prop="developmenttype"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.developmenttype == 2">VIP</span>
            <span v-else>商城</span>
          </template>
        </el-table-column>
        <el-table-column label="开发关系账号" prop="usermobile" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.developmenttype == 2">{{
              scope.row.topSuperiorNm
            }}</span>
            <span v-else>{{ scope.row.userSuperiorNm }} </span>
          </template>
        </el-table-column>
        <el-table-column
          label="隶属商城账号"
          prop="userSuperiorNm"
          align="center"
        />
        <el-table-column
          label="注册时间"
          width="180"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.userregisttime != null"></i>
            <span v-if="scope.row.userregisttime != null">{{
              scope.row.userregisttime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="禁止登录" prop="userban" align="center" width="160">
                <template slot-scope="scope">
                    <span>{{ scope.row.userban==0?'允许登录':'禁止登录'}}    </span>
                    <el-switch
                        v-model="scope.row.userban"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="0"
                        :inactive-value="1"
                        @change="swithchange(scope.row)" >
                    </el-switch>
                </template>
            </el-table-column> -->
        <el-table-column label="操作" align="center" width="240" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click.native="detailForm(scope.$index, scope.row)"
              >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--列表end --222e-->

      <!--分页模块start-->
      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
    </el-card>
    <!--分页模块end-->

    <!--查看弹框start-->
    <el-dialog
      :title="formMap[formName]"
      :visible.sync="detailVisible"
      :before-close="hideDetailForm"
      width="50%"
      top="5vh"
      v-dialogDrag
      :close-on-click-modal="false"
    >
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span
              style="
                display: inline-block;
                background-color: #3478f5;
                width: 3px;
                height: 20px;
                margin-right: 5px;
                float: left;
                margin-top: 2px;
              "
            ></span>
            {{ formMap[formName] }}
          </span>
        </div>
      </template>
      <el-card>
        <el-form :model="formData" label-width="140px">
          <el-form-item style="background: #e1e1e1">
            <span style="color: #3a3a3a; margin-left: -120px">用户信息</span>
          </el-form-item>
          <el-form-item
            style="border-bottom: 1px solid #ebeef5"
            label-width="0px"
          >
            <el-form-item
              label="头像："
              style="width: 30%; display: inline-block"
            >
              <!--<img :src="formData.userpic" alt style="width: 60px;height: 50px">-->
              <el-popover
                v-if="formData.userpic"
                placement="right"
                trigger="hover"
              >
                <img
                  :src="formData.userpic"
                  style="width: 400px; border-radius: 3px"
                />
                <img
                  slot="reference"
                  :src="formData.userpic"
                  style="max-height: 80px; max-width: 50px; border-radius: 5px"
                />
              </el-popover>
              <el-popover v-else placement="right" trigger="hover">
                <img
                  src="../../assets/image/appimage.png"
                  style="width: 400px; border-radius: 3px"
                />
                <img
                  slot="reference"
                  src="../../assets/image/appimage.png"
                  style="max-height: 80px; max-width: 50px; border-radius: 5px"
                />
              </el-popover>
            </el-form-item>
          </el-form-item>
          <el-form-item
            style="border-bottom: 1px solid #ebeef5"
            label-width="0px"
          >
            <el-form-item
              label="昵称："
              style="width: 30%; display: inline-block"
            >
              <!-- <input v-model="formData.usernick" type="text" readonly> -->
              <span v-if="formData.usernick != null">
                {{ formData.usernick }}
              </span>
              <span v-else> {{ formData.usermobile }}</span>
            </el-form-item>
            <el-form-item
              label="手机号："
              style="margin-left: 80px; width: 30%; display: inline-block"
            >
              <input v-model="formData.usermobile" type="text" readonly />
            </el-form-item>
          </el-form-item>
          <el-form-item
            style="border-bottom: 1px solid #ebeef5"
            label-width="0px"
          >
            <el-form-item
              label="注册时间："
              style="width: 30%; display: inline-block"
            >
              <input
                :value="formData.userregisttime | formatDateStr('yyyy-MM-dd')"
                type="text"
                readonly
              />
            </el-form-item>
          </el-form-item>

          <div v-if="formData.superioruser != null">
            <el-form-item style="background: #e1e1e1">
              <span style="color: #3a3a3a; margin-left: -120px"
                >上级用户信息（{{
                  formData.superioruser.enterprisename
                }}）</span
              >
            </el-form-item>

            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="昵称："
                style="width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.superioruser.usernick"
                  type="text"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="手机号："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.superioruser.usermobile"
                  type="text"
                  readonly
                />
              </el-form-item>
            </el-form-item>
            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="账户余额："
                style="width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.superioruser.usersurplusintegral"
                  type="text"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="总业绩："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.superioruser.usertotalintegral"
                  type="text"
                  readonly
                />
              </el-form-item>
            </el-form-item>
            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="代理商品业绩："
                style="width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.superioruser.commodityperformance"
                  type="text"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="非代理商品业绩："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.superioruser.nonagencyachievement"
                  type="text"
                  readonly
                />
              </el-form-item>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </el-dialog>
    <!--查看弹框end-->
  </div>
</template>
<script>
import {
  getVipList, //获取列表
  updateVipUser, //禁止登陆开关
} from "../../api/mbuser/mbuser";

export default {
  data() {
    return {
      pickerOptions: {
        //快速选择日期
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      query: {
        //查询条件
        usernick: "",
        startDate: "",
        endDate: "",
        currentPage: 1,
        pageSize: 5,
      },
      detailVisible: false,
      formName: null,
      formMap: {
        add: "添加内容",
        edit: "编辑信息",
        detail: "查看详情",
        setup: "商城品牌设置",
        invitation: "邀请关系修改",
        surplusIntegral: "账户余额",
      },

      createTime: [], //选择日期时需要的model
      list: [], //列表集合
      totalNumber: 0, //分页总页数
      loading: true, //列表加载
      formLoading: false, //表单提交加载
      cancelToggle: false, //列表是否全选
      multipleSelection: [], //多选集合
      formData: {}, //详情对象
    };
  },
  methods: {
    /*日期选择事件*/
    dateChange(val) {
      if (val == null) {
        this.query.startDate = "";
        this.query.endDate = "";
      } else {
        this.query.startDate = val[0];
        this.query.endDate = val[1];
        this.query.currentPage = 1;
      }
      this.getVipList();
      console.log(this.query);
    },
    /*获取列表事件*/
    getVipList() {
      this.loading = true;
      getVipList(this.query)
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message);
            this.loading = false;
            return false;
          }
          console.log(response);
          this.list = response.data.list || [];
          // if (this.list.length > 0) {
          //     let mylist = this.list;
          //     for (var i = 0; i < mylist.length; i++) {
          //         mylist[i].userban = mylist[i].userban.toString();
          //     }
          //     this.list = mylist;
          // }

          this.totalNumber = response.data.totalNumber || 0;
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
        });
    },
    //开关禁止登陆
    swithchange(row) {
      if (row !== null) {
        let data = {
          userid: row.userid,
          userban: row.userban,
        };
        updateVipUser(data).then((response) => {
          this.formLoading = false;
          if (response.code != 0) {
            this.$message.error(response.message);
            return false;
          }
          this.$message.success("操作成功");
        });
      }
    },
    //显示 查看弹框
    detailForm(index, row) {
      if (row !== null) {
        this.detailVisible = true;
        this.formData = Object.assign({}, row);
        this.formName = "detail";
      }
    },
    // 隐藏详情弹框
    hideDetailForm() {
      // 更改值
      this.detailVisible = !this.detailVisible;
      return true;
    },

    /*列表查询条件事件*/
    onSubmit() {
      this.query.currentPage = 1;
      this.getVipList();
    },

    /*刷新*/
    onRest() {
      //刷新事件需要重置查询条件
      this.createTime = [];
      this.query = {
        currentPage: 1,
        pageSize: 5,
      };
      this.getVipList();
    },

    /*点击页数*/
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getVipList();
    },

    /*选择每页条数【10,20,30,40,50】*/
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getVipList();
    },

    /*取消全选事件*/
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        // debugger
        this.$refs.multipleTable.clearSelection();
      }
    },

    /*列表复选框选择事件*/
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      if (val == "") {
        this.cancelToggle = false;
        return;
      }
      this.cancelToggle = true;
    },

    //vip-dialog
    handleVIP(id) {
      this.$router.push({ name: "VIP", query: { id: id } });
    },
    //我的好友
    tomyuser(uid) {
      if (uid !== undefined) {
        // alert("=="+uid);
        this.$router.push({
          path: "/mbUser/myfriend",
          query: { uid: uid },
        });
      }
    },
    //h好友的好友
    tomyfriend(uid) {
      if (uid !== undefined) {
        // alert("=="+uid);
        this.$router.push({
          path: "/mbUser/myfriend",
          query: { uid: uid },
        });
      }
    },
    //我的订单
    tomyorder(uid) {
      if (uid !== undefined) {
        //  alert("=="+uid);
        this.$router.push({
          path: "/mbUser/myorder",
          query: { uid: uid, flag: "0" },
        });
      }
    },
    //好友订单
    tofriendorder(uid) {
      if (uid !== undefined) {
        //  alert("=="+uid);
        this.$router.push({
          path: "/mbUser/myorder",
          query: { gid: uid, flag: "1" },
        });
      }
    },

    //跳转到站内信
    showmseeage() {
      this.$router.push({ path: "/mbUser/sysMsg" });
    },
  },
  created() {
    this.getVipList();
  },
};
</script>
